<template>
  <el-form class="tl-form" ref="form" :model="model" :rules="rules" label-width="170px" style="width: calc(var(--tableWidth) - 50px);margin-top: 10px;margin-left: 20px">
    <el-row v-for="(item, index) in customerTaskList" :key="index + 'task'" style="background: white;box-shadow: 0 0 10px #ccc">
      <div class="tl-form-task">{{ index + 1 + ' ' + item.taskname }}
        <el-button type="text" icon="el-icon-view" @click="openViewDialog('editForm', item.id)">查看详情</el-button>
        <el-button type="text" icon="el-icon-circle-check" @click="projectTaskMark(item.id, '1', item)" v-if="item.markflag === '0' && canWatch">关注</el-button>
        <el-button type="text" icon="el-icon-circle-close" @click="projectTaskMark(item.id, '2', item)" v-if="item.markflag === '1' && canWatch">取消关注</el-button>
        <el-button type="text" icon="el-icon-edit" @click="openCommentDialog('insertComment', item)" v-if="canWatch">留言</el-button>
      </div>
      <div style="position: absolute;top: 18px;right: 50px">
        <el-tag v-if="item.needsupport === '1'" type="warning">需要支持</el-tag>
        <el-tag v-if="item.needsupport === '0'">不需要支持</el-tag>
      </div>
      <el-row>
        <el-col :span="12">
          <el-form-item label="关键决策客户部门职务" prop="post">
            <el-input v-model="item.post" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="任务支持程度" prop="customerapproval">
            <el-select v-model="item.customerapproval" filterable clearable :disabled="true">
              <el-option v-for="item in codeModel.customerapprovalList" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
        </el-col> -->
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="客户接触现状" prop="customerattach">
            <el-input v-model="item.customerattach" type="textarea" autosize :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="客户关系改善计划" prop="improveplan">
            <el-input v-model="item.improveplan" type="textarea" autosize :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-row>
    <tl-edit ref="editForm" :projectinfo="projectInfo"></tl-edit>
    <insert-comment source-type="MpmProjectTask"  ref="insertComment"></insert-comment>
  </el-form>
</template>

<script>
/** mixins */
import { mixin_edit } from '@tapui/mixins/mixin_edit'
import tlCustomerAnalysis from '../mpmCustomerAnalysis/indexForCustomerTask'
import tlEdit from '../mpmProjectTask/edit'
/** 子组件 */
import insertComment from "../mpmComments/insertComment"
/** 工具类 */
import { putAction, getAction, postAction, deleteAction } from '@tapui/utils/http'
/** VUE配置 */
export default {
  mixins: [mixin_edit],
  components: { tlCustomerAnalysis, tlEdit, insertComment },
  data() {
    return {
      moduleTitle: '系统部监管-客户决策分析',
      urlPrefix: '/mpm/projectTask/',
      url: {
        changeOperateMarkState: '/mpm/project/operateMarkState'
        // 额外的url
      }
    }
  },
  props: {
    customerTaskList: {
      type: Array,
      default: () => []
    },
    projectInfo: {
      type: Object,
      default: () => {}
    },
    canWatch: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    sidebar() {
      return this.$store.getters.sidebar.opened ? '300px' : '140px'
    }
  },
  methods: {
    /** 打开详情对话框实现*/
    openViewDialog(editForm, id) {
      this.$refs[editForm].id = id
      this.$refs[editForm].isAdd = false
      this.$refs[editForm].visible = true
      this.$refs[editForm].disableEditSubmit = true
      let that = this
      setTimeout(() => {
        that.clickRowkey = id
      }, 100)
    },
    /** 打开评论对话框实现 */
    openCommentDialog(editForm, rowData) {
      rowData.target = rowData.taskname
      this.$refs[editForm].isAdd = true
      this.$refs[editForm].visible = true
      this.$refs[editForm].disableEditSubmit = false
      this.$refs[editForm].parentModel = rowData
    },
    projectTaskMark(id, type, item) {
      let params = {
        sourcetype: 'MpmProjectTask',
        sourceid: id,
        operatetype: 'mark',
        usercode: this.user.code,
        type: type
      }
      if (type === '1') {
        item.markflag = '1'
      } else {
        item.markflag = '0'
      }
      postAction(this.url.changeOperateMarkState, params)
        .then((res) => {
          if (res.success) {
            if (type === '1') {
              this.$tap.alert('关注成功！')
            } else if (type === '2') {
              this.$tap.alert('取消关注成功！')
            }
          } else {
            this.$tap.alert(res.message, 'warning')
          }
        })
    }
  }
}
</script>
<style scoped>
.tl-form >>> .el-form-item--mini.el-form-item {
  margin-right: 15px;
}
.tl-form-task {
  font-size: 18px;
  font-weight: bold;
  line-height: 20px;
  border-left: 4px solid #409eff;
  padding-left: 8px;
  margin: 17px 0 12px 15px;
  word-break: break-all;
  width: 80%;
}
.tl-form-improveplan {
  font-size: 14px;
  line-height: 18px;
  padding-left: 8px;
  margin: 17px 15px 12px 15px;
  word-break: break-all;
}
</style>
